<template>
    <div class="product-detail-container">
        <div class="page-header">
            <h2>货品详情</h2>
        </div>

        <div class="form-container" v-loading="loading">
            <el-form label-width="120px" label-position="right">
                <el-card class="form-card">
                    <template #header>
                        <span class="card-title">基础信息</span>
                    </template>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="货品编号">
                                <el-input v-model="productData.goodsCode" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="货品名称">
                                <el-input v-model="productData.goodsName" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="货品类型">
                                <el-input v-model="productData.typeName" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="规格型号">
                                <el-input v-model="productData.specModel" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="供应商">
                                <el-input :value="productData.supplierId" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="客户名称">
                                <el-input :value="productData.userId" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="入库参考价/元">
                                <el-input :value="productData.purchasePrice" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="出库参考价/元">
                                <el-input :value="productData.salePrice" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="显示顺序">
                                <el-input :value="productData.displayOrder" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态">
                                <el-radio-group v-model="productData.status" disabled>
                                    <el-radio :label="1">启用</el-radio>
                                    <el-radio :label="0">停用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="保质期管理">
                                <el-checkbox :model-value="productData.shelfLifeManagement === 1"
                                    disabled>开启</el-checkbox>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <template v-if="productData.shelfLifeManagement === 1">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="保质期时长">
                                    <el-input :value="productData.shelfLife" readonly></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="保质期单位">
                                    <el-input v-model="productData.shelfLifeUnit" readonly></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="预警天数">
                                    <el-input :value="productData.warningDays" readonly></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </template>

                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="备注">
                                <el-input v-model="productData.notes" type="textarea" :rows="4" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>

                <!-- 单位管理部分 -->
                <el-card class="form-card unit-card">
                    <template #header>
                        <span class="card-title">单位管理</span>
                    </template>

                    <div class="unit-management">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-checkbox :model-value="productData.enableMultiUnit" disabled>启用多单位</el-checkbox>
                            </el-col>
                        </el-row>

                        <div class="unit-list" v-if="productData.enableMultiUnit">
                            <div v-for="(unit, index) in productData.unitList" :key="index" class="unit-item">
                                <el-row :gutter="20" align="middle">
                                    <el-col :span="1">
                                        <span class="required-mark" v-if="index === 0">*</span>
                                    </el-col>
                                    <el-col :span="3">
                                        <span class="unit-label">{{ index === 0 ? '主单位' : '辅助单位' }}</span>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-input :value="unit.unitName" readonly placeholder="请选择"></el-input>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-input v-model="unit.unitCode" readonly placeholder="请输入"></el-input>
                                    </el-col>
                                    <el-col :span="1" v-if="index > 0">
                                        <span class="unit-divider">瓶</span>
                                    </el-col>
                                    <el-col :span="5" v-if="index > 0">
                                        <el-input v-model="unit.conversion" readonly placeholder="请输入"></el-input>
                                    </el-col>
                                    <el-col :span="1" v-if="index > 0">
                                        <span class="unit-divider">箱</span>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </el-card>

                <div class="form-footer">
                    <el-button @click="goBack">返回</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

const loading = ref(false);

// 货品数据
const productData = reactive({
    id: 0,
    goodsCode: '',
    goodsName: '',
    status: 1,
    productTypeId: 0,
    specModel: '',
    supplierId: 0,
    userId: 0,
    purchasePrice: 0,
    salePrice: 0,
    displayOrder: 0,
    currentInventory: 0,
    totalInventoryamount: 0,
    shelfLifeManagement: 0,
    shelfLife: 0,
    shelfLifeUnit: '',
    warningDays: 0,
    notes: '',
    unitId: 0,
    unitName: '',
    typeName: '',
    creator: '',
    createDate: '',
    modifier: '',
    modifyDate: '',
    // 单位管理
    enableMultiUnit: false,
    unitList: [
        {
            unitId: null,
            unitName: '',
            unitCode: '',
            conversion: '',
            isPrimary: true
        }
    ]
});

// 加载货品详情
const loadProductDetail = async () => {
    const productId = route.query.id || route.params.id;

    if (!productId) {
        ElMessage.error('缺少货品ID');
        goBack();
        return;
    }

    loading.value = true;

    try {
        // 调用API获取货品详情
        const response = await proxy.http.post('/api/demo/ProductInformation/GetPageData', {
            page: 1,
            rows: 1,
            wheres: `[{"name":"id","value":"${productId}"}]`,
            sort: 'id',
            order: 'desc'
        });

        console.log('货品详情API响应:', response);

        if (response && response.rows && response.rows.length > 0) {
            const data = response.rows[0];

            // 更新响应式数据
            Object.keys(productData).forEach(key => {
                if (data.hasOwnProperty(key)) {
                    productData[key] = data[key];
                }
            });

            console.log('货品详情加载成功:', productData);
        } else {
            ElMessage.error('未找到货品信息');
            goBack();
        }
    } catch (error) {
        console.error('加载货品详情失败:', error);
        ElMessage.error('加载货品详情失败');
    } finally {
        loading.value = false;
    }
};

// 返回列表
const goBack = () => {
    router.push('/productinformationmodel');
};

// 页面加载时获取数据
onMounted(() => {
    loadProductDetail();
});
</script>

<style lang="less" scoped>
.product-detail-container {
    padding: 20px;

    .page-header {
        margin-bottom: 20px;

        h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
            color: #303133;
        }
    }

    .form-container {
        .form-card {
            margin-bottom: 20px;

            .card-title {
                font-size: 16px;
                font-weight: 500;
                color: #303133;
            }
        }

        .unit-card {
            .unit-management {
                .unit-list {
                    margin-top: 20px;

                    .unit-item {
                        margin-bottom: 15px;
                        padding: 10px;
                        background-color: #f5f7fa;
                        border-radius: 4px;

                        .required-mark {
                            color: #f56c6c;
                            font-size: 16px;
                            font-weight: bold;
                        }

                        .unit-label {
                            font-weight: 500;
                            color: #606266;
                        }

                        .unit-divider {
                            color: #909399;
                            font-size: 14px;
                            display: inline-block;
                            text-align: center;
                        }
                    }
                }
            }
        }

        .form-footer {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
    }
}
</style>
